<template>
    <div class="goods-details">
        <div class="goods-details-card">
            <Tabs>
                <TabPane label="商品信息" icon="ios-color-filter">
                    <!--内容一-->
                    <div class="con">
                        <Row :gutter="20" style="padding-right: 10px;">
                            <Col span="12" type="flex" justify="center">
                                <!--左边列表-->
                                <Row :gutter="0">
                                    <Col span="6" class="list"><a>商品编号:</a></Col><Col span="18" class="list"><p>{{details.goodssn}}</p></Col>
                                    <Col span="6" class="list"><a>商品名称:</a></Col><Col span="18" class="list"><p>{{details.goodsname}}</p></Col>
                                    <Col span="6" class="list"><a>普通价格:</a></Col><Col span="18" class="list"><p>¥ {{details.marketprice}}</p></Col>
                                    <Col span="6" class="list"><a>会员价格:</a></Col><Col span="18" class="list"><p>¥ {{details.shopprice}}</p></Col>
                                    <Col span="6" class="list"><a>商品库存:</a></Col><Col span="18" class="list"><p>{{details.goodsstock}}</p></Col>
                                    <Col span="6" class="list"><a>单位:</a></Col><Col span="18" class="list"><p>{{details.goodsunit}}</p></Col>
                                    <Col span="6" class="list"><a>商品信息:</a></Col><Col span="18" class="list"><p>{{details.goodsname}}</p></Col>
                                    <Col span="6" class="list"><a>商品状态:</a></Col><Col span="18" class="list"><p>{{details.issale==1?'上架':'下架'}}</p></Col>
                                    <Col span="6" class="list"><a>所属分类:</a></Col><Col span="18" class="list">
                                    <Breadcrumb>
                                        <BreadcrumbItem>{{details.catname1}}</BreadcrumbItem>
                                        <BreadcrumbItem v-if="details.catname2!=null">{{details.catname2}}</BreadcrumbItem>
                                        <BreadcrumbItem v-if="details.catname3!=null">{{details.catname3}}</BreadcrumbItem>
                                    </Breadcrumb>
                                    </Col>
                                    <Col span="6" class="list"><a>店铺名称:</a></Col><Col span="18" class="list"><p>{{details.shopname}}</p></Col>
                                </Row>
                            </Col>
                            <Col span="12">
                                <!--右边图标-->
                                <Card>
                                    <img class="goodsIcon" :src="details.goodsimg"/>
                                </Card>
                            </Col>
                        </Row>
                        <!--详情-->
                        <p class="goodsdescName">商品描述</p>
                        <div class="goodsdesc" v-html="miaoshu"></div>
                    </div>
                </TabPane>
                <TabPane label="商品属性" icon="funnel">
                    <!--内容二-->
                    <div class="con">
                        <div style="padding-right: 10px;">
                            <i-table style="margin-top: 10px;" stripe :columns="columns" :data="data"></i-table>
                        </div>
                    </div>
                </TabPane>
                <TabPane label="商品相册" icon="android-image">
                    <!--内容三-->
                    <div class="con">
                        <Row :gutter="20" style="padding-right: 10px;">
                            <Col class="imgCon" span="6" v-for="(key,value) in img">
                                <Card>
                                    <img class="goodsImg" :src="key.goodsimg"/>
                                </Card>
                            </Col>
                        </Row>
                    </div>
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>
<script>
    export default {
        name:"goods-details",
        data(){
            return{
                details:{},
                img:[],
                miaoshu:"",
                columns:[
                    {
                        title: '属性名称',
                        key: 'attrname',
                        align:"center",
                    },
                    {
                        title: '规格',
                        key: 'attrval',
                        align:"center",
                    },
                    {
                        title: '价格',
                        key: 'attrtuanprice',
                        align:"center",
                        render:(h,params)=>{
                            return '¥ '+params.row.attrtuanprice
                        }
                    },
                    {
                        title: '推荐',
                        key: 'isrecomm',
                        align:"center",
                        render:(h,params)=>{
                            if(params.row.isrecomm==1){
                                return h("Icon",
                                    {
                                        props:{
                                            type:"checkmark-round",
                                            color:"green",
                                        }
                                    }
                                )
                            }else{
                                return h("Icon",
                                    {
                                        props:{
                                            type:"close-round",
                                            color:"red",
                                        }
                                    }
                                )
                            }
                        }
                    },
                    {
                        title: '库存',
                        key: 'attrstock',
                        align:"center",
                    },
                    {
                        title: '价格属性',
                        key: 'ispriceattr',
                        align:"center",
                        render:(h,params)=>{
                            if(params.row.ispriceattr==1){
                                return h("Icon",
                                    {
                                        props:{
                                            type:"checkmark-round",
                                            color:"green",
                                        }
                                    }
                                )
                            }else{
                                return h("Icon",
                                    {
                                        props:{
                                            type:"close-round",
                                            color:"red",
                                        }
                                    }
                                )
                            }
                        }
                    },
                ],
                data:[],
            }
        },
        mounted(){
            this.getDetails()
        },
        methods:{
            getDetails(){
                this.getJsonData("Goods/getGoodsOneByGoodsId",{goodsId:this.$route.query.id})
                    .then((res)=>{
                        this.details=res.data
                        this.img=res.image
                        this.miaoshu=res.data.miaoshu.replace(/\<img/g, "<img style='display:block;width:calc(100% - 0px);'");
                        this.data=res.attr
                    })
            }
        }
    }
</script>
<style lang="less">
    @import "./goods-details";
</style>